<template>
  <div class="home">
      <div>
          <h3>state</h3>
          <p>a:{{ a }}</p>
          <p>b:{{ b }}</p>
      </div>
     <div>
          <h3>getters</h3>
          <p>doubleA:{{ doubleA }}</p>
          <p>doubleA:{{ doubleB }}</p>
          <p>doubleBoth:{{ doubleBoth }}</p>
      </div>
       <div>
          <h3>mutations</h3>
          <p>
              <button @click="addA">a++</button>
              <button @click="addAN(10)">a+10</button>
          </p>
          <p>
              <button @click="addB">b++</button>
          </p>
      </div>
      <div>
          <h3>actions</h3>
          <p>
              <button @click="addA_Async">a++</button>
              <button @click="addAN_Async(10)">a+10</button>
          </p>
          <p>
              <button @click="addB_Async()">b++</button>
          </p>
          <p>
            <button @click="addBoth_Async()">a++,b++</button>
          </p>
        
      </div>
  </div>
</template>

<script>
// @ is an alias to /src


// Vue组件中如果使用store实例

// 1. 直接通过$store获取数据和方法  => 手搓版  => 麻烦
// state => this.$store.state
// getters => this.$store.getters
// mutations  => 同步方法 this.$store.commit("addAN",10)
// actions  => 异步方法    this.$store.dispatch("addA_Async",10)

// 2. 直接通过Vue实例对应属性名/方法名获取  -> Vue实例上没有相关属性和方法 -> 自己配置一份 
//    优点: 通过实例访问数据和方法  缺点:自己写的感觉更麻烦了


export default {
  name: 'HomeView',
  computed:{
    // 将state中的数据挂载到当前Vue实例  (this.a 依赖于this.$store.state.a)
    a(){
        return this.$store.state.a;
    },
    b(){
        return this.$store.state.b;
    },
    A(){   // 可以随意改名
        return this.$store.state.a;
    },
    // 将getters中的数据挂载到当前Vue实例  (this.doubleA 依赖于this.$store.getters.doubleA)
    doubleA(){
        return this.$store.getters.doubleA;
    },
    doubleB(){
        return this.$store.getters.doubleB;
    },
    doubleBoth(){
        return this.$store.getters.doubleBoth;
    },
    dbA(){  // 可以随意改名
        return this.$store.getters.doubleA;
    },
  },
  methods:{
    // 将mutations中的数据挂载到当前Vue实例  (同步)
    addA(arg){
        return this.$store.commit("addA",arg);
    },
    addAN(arg){
        return this.$store.commit("addAN",arg);
    },
    addB(arg){
        return this.$store.commit("addB",arg);
    },
     // 将actions中的数据挂载到当前Vue实例  (异步)
    addA_Async(arg){
        return this.$store.dispatch("addA_Async",arg);
    },
    addAN_Async(arg){
        return this.$store.dispatch("addAN_Async",arg);
    },
    addB_Async(arg){
        return this.$store.dispatch("addB_Async",arg);
    },
    addBoth_Async(arg){
        return this.$store.dispatch("addBoth_Async",arg);
    },
  },
  mounted(){
    console.log("better",this);
    console.log("store实例",this.$store);
  }
}
</script>
